<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
        <el-button type="primary" :size="size" icon="el-icon-plus" @click="showDialog({ isEdit: false, title: '新增网点' })">新增网点</el-button>
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
        </template>
      </c-table>
    </div>
    <div v-if="dialogObj.isShow">
      <c-dialog
        class="dialog-box"
        width="80%"
        :is-show="dialogObj.isShow"
        :title="dialogObj.title"
        close-btn
        @before-close="dialogObj.isShow = false"
        @on-submit="dialogConfirm"
      >
        <outlets-add
          v-if="dialogObj.type === 0"
          ref="childRef"
          :init-data.sync="dialogObj.initData"
          :type-list="typeList"
          :is-edit="dialogObj.isEdit"
        ></outlets-add>
        <config v-if="dialogObj.type === 1" ref="childRef" :init-data.sync="dialogObj.initData"></config>
      </c-dialog>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import CDialog from 'components/dialog'
import OutletsAdd from './add'
// import utils from 'utils'
// import dictObj from '@/store/dictData'
import { ssmQuerySsmApi, ssmSaveOrUpdateSsmApi, ssmDeleteSsmApi } from '@/api/ssmApi'
import config from './config'

export default {
  name: 'outlets',
  mixins: [mixinTable],
  components: {
    CDialog,
    OutletsAdd,
    config
  },
  data(vm) {
    return {
      typeList: [], // 网点类型列表
      // 对话框对象
      dialogObj: {},
      cityCode: '', // 城市编码
      // 表格内操作按钮
      tableInnerBtns: [
        {
          name: '设置',
          icon: '',
          width: 80,
          handle(row) {
            console.log('72===', row)
            const { id } = row
            vm.showDialog({
              title: '设置网点',
              isShow: true,
              initData: {
                id
              }
            })
          }
        },
        {
          name: '编辑',
          icon: '',
          width: 80,
          handle(row) {
            console.log('72===', row)
            const { id } = row
            vm.showDialog({
              title: '编辑网点',
              isEdit: true,
              type: 0,
              initData: {
                id,
                name: row.name,
                cityCode: row.cityCode,
                areaName: row.areaName,
                areaCode: row.areaCode,
                address: row.address,
                lat: row.lat,
                lng: row.lng,
                headImgUrl: row.headImgUrl ? [{ name: '1', url: row.headImgUrl }] : [],
                changeCity: row.changeCity,
                status: row.status,
                tel: row.tel,
                workTime: row.workTime
              },
              typeList: vm.typeList
            })
          }
        },
        {
          name: '删除',
          icon: '',
          width: 80,
          handle(row) {
            console.log('72===', row)
            const { id } = row
            vm.deleteHandle({
              initData: {
                id
              }
            })
          }
        }
      ],
      tableHeader: [
        {
          label: '网点名称',
          prop: 'name',
          fixed: true,
          search: {
            type: 'input',
            prop: 'name'
          },
          width: 150
        },
        {
          label: '状态',
          prop: 'status',
          width: 100,
          setColor: row => (row.status == 0 ? 'red' : ''),
          formatter: row => row && vm.setTableColumnLabel(row.status, 'ssmStatusList')
          // search: {
          //   type: 'dict',
          //   optionsList: dictObj.disabledStatus
          // }
        },
        {
          label: '营业时间',
          prop: 'workTime',
          width: 100
        },
        {
          label: '联系电话',
          prop: 'tel',
          width: 120
        },
        {
          label: '用户评分',
          prop: 'userScore',
          width: 100
        },
        {
          label: '用户评级星数',
          prop: 'userGrade',
          width: 120
        },
        {
          label: '用户已评论总数',
          prop: 'userReviewCount',
          width: 120
        },
        {
          label: '订单量',
          prop: 'orderCount',
          width: 100
        },
        {
          label: '城市编码',
          prop: 'cityCode',
          width: 100
        },
        {
          label: '详细地址',
          prop: 'address',
          width: 150
        }
      ]
      // pageInfo: {
      // 	pageSize:
      // 	pageNo
      // 	name
      // }
    }
  },
  created() {
    // this.getTypeList()
    this.fetchData()
  },
  methods: {
    // getTypeList() {
    //   this.$api.outlets
    //     .fetch('parkCategoryList', {
    //       rows: 1,
    //       offset: 20
    //     })
    //     .then(res => {
    //       const typeList = res.map(res => ({ label: res.name, value: res.id }))
    //       this.typeList = typeList
    //     })
    // },
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { name } = this.searchObj
      console.log('210===', this.searchObj)
      this.isLoading = true
      ssmQuerySsmApi({
        pageSize,
        pageNo,
        name
      }).then(res => {
        this.isLoading = false
        if (res.code === 0) {
          console.log('217===', res)
          this.tableList = res.data.data
          this.pageInfo.totalNum = res.totalCount
        }
      })

      // this.$api.outlets
      //   .fetch('parkList', {
      //     ...searchDate,
      //     ...other,
      //     rows: pageNo,
      //     offset: pageSize
      //   })
      //   .then(res => {
      //     this.isLoading = false
      //     if (res && res.totalCount) {
      //       const { data, totalCount } = res
      //       this.pageInfo.totalNum = totalCount
      //       this.tableList = data || []
      //     } else {
      //       this.tableList = res || []
      //     }
      //   })
    },
    /**
     * dialog对话框数据处理
     * @opts {*}
     */
    showDialog(opts) {
      console.log('232===', opts)
      console.log('245===', this.dialogObj)
      if (opts.title === '编辑网点') {
        this.dialogObj = {
          isShow: true,
          type: 0,
          isEdit: opts.isEdit || false,
          title: opts.title || '修改网点',
          initData: opts.initData,
          typeList: this.typeList
        }
      }
      if (opts.title === '新增网点') {
        opts.initData = {
          changeCity: '',
          areaCode: '',
          name: '',
          address: '',
          lng: '',
          lat: '',
          status: '',
          tel: '',
          headImgUrl: [],
          workTime: ''
        }
        this.dialogObj = {
          isShow: true,
          type: 0,
          isEdit: opts.isEdit || false,
          title: opts.title || '新增网点',
          initData: opts.initData,
          typeList: this.typeList
        }
      }
      if (opts.title === '设置网点') {
        this.dialogObj = {
          isShow: true,
          type: 1,
          title: opts.title || '设置网点',
          initData: opts.initData,
          typeList: this.typeList
        }
      }
    },
    /**
     * dialog新增、编辑处理函数
     */
    dialogConfirm() {
      const childRef = this.$refs.childRef
      let arr = []
      childRef.formModel.headImgUrl.forEach(item => {
        arr.push(item.url)
      })

      childRef.$refs.formRef.validate(valid => {
        if (valid) {
          console.log('275===', childRef.formModel)
          ssmSaveOrUpdateSsmApi({
            id: childRef.formModel.id,
            areaCode: childRef.formModel.areaCode,
            changeCity: childRef.formModel.changeCity,
            cityCode: childRef.formModel.cityCode,
            lat: childRef.formModel.lat,
            lng: childRef.formModel.lng,
            address: childRef.formModel.address,
            name: childRef.formModel.name,
            headImgUrl: arr.toString(),
            status: childRef.formModel.status,
            tel: childRef.formModel.tel,
            workTime: childRef.formModel.workTime
          }).then(res => {
            console.log('275====', res)
            if (res.code === 0) {
              this.$msgTip('新增成功')
              this.dialogObj.isShow = false
              this.fetchData()
            } else {
              this.$msgTip(res.message, 'error')
            }
          })

          // const { parkMoney, parkDayMoney, ...other } = childRef.formModel
          // const curAction = this.dialogObj.isEdit ? 'editPark' : 'savePark'
          // this.$api.outlets
          //   .fetch(curAction, {
          //     parkMoney: parkMoney * 100,
          //     parkDayMoney: parkDayMoney * 100,
          //     ...other
          //   })
          //   .then(() => {
          //     this.responeHandle(this.dialogObj.isEdit ? '更新成功' : '新增成功')
          //   })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 删除单条表格数据
     * @id {Number}
     */
    deleteHandle(params) {
      console.log('333===', params)

      this.$confirm(`确定移除 ${params.initData.id} 文件`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        ssmDeleteSsmApi({
          id: params.initData.id,
          delFlag: '1'
        }).then(res => {
          console.log('338====', res)
          if (res.code === 0) {
            this.$msgTip('删除成功')
            this.fetchData()
          } else {
            this.$msgTip(res.message, 'error')
          }
        })
      })
    }
  }
}
</script>
